<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录问题调试工具</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        h1, h2 {
            color: #303133;
        }
        button {
            padding: 8px 16px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #40a9ff;
        }
        .section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
        }
        .info-box {
            background-color: #f0f2f5;
            padding: 15px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 300px;
            overflow-y: auto;
        }
        .avatar-preview {
            margin-top: 10px;
            display: flex;
            align-items: center;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .success {
            color: #52c41a;
        }
        .error {
            color: #ff4d4f;
        }
        .warning {
            color: #faad14;
        }
        .step {
            margin-bottom: 15px;
        }
        .step-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>登录问题修复调试工具</h1>
        
        <div class="section">
            <h2>修复内容概述</h2>
            <ul>
                <li>修复了Layout.vue中用户信息同步问题，现在直接从localStorage获取最新信息</li>
                <li>为用户信息添加了自动生成默认头像功能</li>
                <li>优化了fixUserInfo.js，确保所有用户信息都包含必要字段（roles、avatar等）</li>
                <li>简化了用户信息处理逻辑，减少了重复代码</li>
            </ul>
        </div>
        
        <div class="section">
            <h2>当前LocalStorage状态</h2>
            <div class="info-box" id="localStorageInfo"></div>
            <button onclick="refreshLocalStorageInfo()">刷新</button>
            <button onclick="clearAllUserData()">清除所有用户数据</button>
        </div>
        
        <div class="section">
            <h2>用户信息预览</h2>
            <div id="userInfoPreview" class="info-box"></div>
            <div class="avatar-preview" id="avatarPreview"></div>
            <button onclick="previewUserInfo()">预览用户信息</button>
        </div>
        
        <div class="section">
            <h2>修复测试步骤</h2>
            <div class="step">
                <div class="step-title">步骤1: 清除当前数据</div>
                <p>点击"清除所有用户数据"按钮，确保当前没有残留的用户信息。</p>
            </div>
            <div class="step">
                <div class="step-title">步骤2: 登录系统</div>
                <p>请访问<a href="/login" target="_blank">登录页面</a>并使用您的账号登录。</p>
            </div>
            <div class="step">
                <div class="step-title">步骤3: 验证修复效果</div>
                <p>登录后返回首页，检查右上角的用户头像是否正确显示，用户名是否显示为您的真实姓名。</p>
                <p>然后返回此页面，点击"预览用户信息"按钮，确认头像已生成。</p>
            </div>
        </div>
        
        <div class="section">
            <h2>手动测试功能</h2>
            <button onclick="createTestUser()">创建测试用户信息</button>
            <button onclick="testFixUserInfo()">测试修复用户信息函数</button>
        </div>
    </div>

    <script>
        // 刷新LocalStorage信息
        function refreshLocalStorageInfo() {
            const infoBox = document.getElementById('localStorageInfo');
            const info = {
                token: localStorage.getItem('token') ? '存在' : '不存在',
                userInfo: localStorage.getItem('userInfo') ? '存在' : '不存在',
                permissions: localStorage.getItem('permissions') ? '存在' : '不存在'
            };
            
            // 显示详细的用户信息内容
            if (localStorage.getItem('userInfo')) {
                try {
                    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
                    info.userInfoDetails = userInfo;
                } catch (e) {
                    info.userInfoDetails = '解析失败: ' + e.message;
                }
            }
            
            infoBox.textContent = JSON.stringify(info, null, 2);
        }
        
        // 清除所有用户数据
        function clearAllUserData() {
            if (confirm('确定要清除所有用户数据吗？这将需要重新登录。')) {
                localStorage.removeItem('token');
                localStorage.removeItem('userInfo');
                localStorage.removeItem('permissions');
                refreshLocalStorageInfo();
                alert('所有用户数据已清除');
            }
        }
        
        // 预览用户信息和头像
        function previewUserInfo() {
            const userInfoPreview = document.getElementById('userInfoPreview');
            const avatarPreview = document.getElementById('avatarPreview');
            
            if (localStorage.getItem('userInfo')) {
                try {
                    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
                    userInfoPreview.textContent = JSON.stringify(userInfo, null, 2);
                    
                    // 预览头像
                    if (userInfo.avatar) {
                        avatarPreview.innerHTML = `
                            <img src="${userInfo.avatar}" class="avatar" alt="用户头像">
                            <span>头像已生成</span>
                        `;
                    } else {
                        avatarPreview.innerHTML = '<span class="warning">头像未设置</span>';
                    }
                } catch (e) {
                    userInfoPreview.textContent = '解析用户信息失败: ' + e.message;
                    avatarPreview.innerHTML = '';
                }
            } else {
                userInfoPreview.textContent = '没有找到用户信息';
                avatarPreview.innerHTML = '';
            }
        }
        
        // 创建测试用户信息
        function createTestUser() {
            const testUser = {
                username: 'test_user',
                realName: '测试用户',
                roles: ['USER'],
                // 不设置avatar，让修复函数自动生成
            };
            
            localStorage.setItem('userInfo', JSON.stringify(testUser));
            refreshLocalStorageInfo();
            previewUserInfo();
            alert('测试用户信息已创建，未设置头像，需要运行修复函数');
        }
        
        // 测试修复用户信息函数
        function testFixUserInfo() {
            // 模拟修复函数的行为
            try {
                let userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : null;
                
                // 如果没有用户信息，创建一个
                if (!userInfo) {
                    userInfo = {
                        username: 'auto_test',
                        realName: '自动测试',
                        roles: ['TEST']
                    };
                }
                
                // 确保roles是数组
                if (!userInfo.roles || !Array.isArray(userInfo.roles)) {
                    if (userInfo.role) {
                        userInfo.roles = Array.isArray(userInfo.role) ? userInfo.role : [userInfo.role];
                    } else {
                        userInfo.roles = [];
                    }
                }
                
                // 确保有realName
                if (!userInfo.realName) {
                    userInfo.realName = '未登录用户';
                }
                
                // 确保有头像
                if (!userInfo.avatar) {
                    const char = userInfo.realName.charAt(0);
                    userInfo.avatar = `data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23409EFF%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20font-family%3D%22Arial%22%20font-size%3D%2218%22%20font-weight%3D%22bold%22%20text-anchor%3D%22middle%22%20dy%3D%22.3em%22%20fill%3D%22white%22%3E${encodeURIComponent(char)}%3C%2Ftext%3E%3C%2Fsvg%3E`;
                }
                
                // 保存修复后的用户信息
                localStorage.setItem('userInfo', JSON.stringify(userInfo));
                
                refreshLocalStorageInfo();
                previewUserInfo();
                alert('用户信息修复完成，已生成头像');
            } catch (e) {
                alert('修复失败: ' + e.message);
                console.error(e);
            }
        }
        
        // 页面加载时自动刷新信息
        window.onload = function() {
            refreshLocalStorageInfo();
            previewUserInfo();
        };
    </script>
</body>
</html>